html,
body,
#app,
.base {
    width: 100%;
    height: 100%;
}

@import "./base-menu";
@import "//at.alicdn.com/t/font_417556_9oxvijd37w.css";
/* 
* 图片上传的线上字体图标库，在中策前端项目图标-zc-back-pc项目
*/
@import '//at.alicdn.com/t/font_2392693_q5lc4tvyrcc.css';
.base {
    display: flex;
    overflow: hidden;
    &.full {
        .base-logo {
            box-shadow: -@space 0 @space @bg-dark;
            background-color: @menuColor;
            z-index: 10;
            position: relative;
        }
        .base-header {
            display: none !important;
        }
        .container {
            height: 100% !important;
            padding: 0;
        }
        .container-content {
            padding: @space;
        }
    }
    .bg {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-color: #ddd;
        // background-image: url('//dianzhanggui.oss-cn-hangzhou.aliyuncs.com/upload/image/201711/547933712400000.jpg');
        background-size: cover; // filter: blur(50px) brightness(.8) opacity(.8);
        // filter: blur(50px);
        position: absolute;
    }
    >.left {
        width: @size * 1.7;
        min-width: @size * 1.7;
        height: 100%; // transition: width 300ms;
        &.mini {
            width: @size * 1.7;
            min-width: @size * 1.7;
            // .menu-list>.menu-item {
            //     padding: 0 @space * 1.5;
            // }
        }
    }
    >.right {
        .f1();
        width: e('calc(100% - 200px)');
        height: 100%;
    }
    .base-logo,
    .base-header {
        width: 100%;
        height: @size * .6;
        transition: background-color 300ms;
    }
    .base-logo {
        background-color: #fff;
        background-image: url(../../images/logo.png);
        background-size: 155px auto;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: relative;
        span{
          top: 15px;
          left: 245px;
          width: 683px;
          font-size: 21px;
          letter-spacing: 5px;
          position: absolute;
          color: @mainColor;
          font-family: 'Microsoft YaHei';
        }
    }
    .base-header {
        color: @defaultFont;
        // background-image: linear-gradient(90deg, #445ed2, #3297ff);
        background: @white;
    }
    .base-header {
        padding: 0 @space * 2;
        font-size: 16px;
        .flexBetween();
    }
    &.summer-theme {
        .base-header-left,
        .base-header-right {
            color: #fff;
            .textShadow(#77bfe1)
        }
        .dropdown-content {
            .textShadow(transparent)
        }
    }
    .season {
      @color: #77bfe1;
      top: 0;
      left: 0;
      width: 100%;
      height: @size * .8;
      z-index: -1;
      position: fixed;
      background-color: @color;
      background-position: left bottom;
      background-repeat: repeat-x, repeat-x, no-repeat;
      background-size: 1900px 100%;
      pointer-events: none;
      .season-tree {
        top: 0;
        left: 0;
        width: 154px;
        height: 106px;
        position: absolute;
      }
    }
    .base-header-left {
        .textShadow(#999);
    }
    .base-header-right {
        font-size: .9em;
        height: 100%;
        .flexRight();
        .wifi {
            font-size: 16px;
            font-weight: bold;
            .text-shadow {
                .textShadow(#ddd);
            }
            img {
                width: 20px;
                height: 20px;
                vertical-align: sub;
            }
        }
        .ivu-icon-arrow-expand,
        .ivu-icon-arrow-shrink {
            vertical-align: middle;
        }
        .ivu-icon-chatbubble-working {
            vertical-align: top;
        }
        .item {
            height: 80%;
            padding: @space * 1.6;
            vertical-align: middle;
            user-select: none;
            .flexCenter();
            .ivu-icon {
                margin-right: @space / 2;
            }
        }
        .item-dropdown {
            cursor: pointer;
            position: relative;
            .ivu-icon {
              margin-right: 0;
            }
            &:hover {
                background-color: @bg-dark;
                .dropdown-content {
                    display: block;
                }
                .ivu-icon-md-arrow-dropdown {
                  color: @white;
                }
            }
            .dropdown-content {
                top: 100%;
                left: 0;
                width: 100%;
                background-color: @bg-dark;
                z-index: 11;
                position: absolute;
                display: none;
                li {
                    color: @white;
                    padding: @space;
                    cursor: pointer;
                    &:hover {
                        background-color: @mainColor;
                    }
                }
            }
        }
    }
    .container {
        width: 100%;
        height: e('calc(100% - 60px)');
        padding: @space / 2;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: 300ms;
        background-size: cover;
        &.transparent {
            .container-body {
                background-color: transparent;
            }
            .container-content {
                background-color: transparent;
            }
        }
    }
    .container-header {
        width: 100%;
        min-height: @space * 6;
        padding: @space;
        .border();
        z-index: 10;
        background-color: white;
        position: relative; // transition: 300ms;
        &.title {
            font-size: 24px;
            background-color: @bg-light;
            &.title-center {
                text-align: center;
            }
            .btn-back {
                z-index: 11;
                position: relative;
            }
        }
        &.large {
            height: @size;
        }
        &.hide {
            border: none;
            height: 0;
            min-height: 0;
            padding: 0;
        }
        &.group {
            padding-left: @space * 2;
            .flexLeft();
            form {
                .flexLeft();
            }
            .ivu-select {
                width: 100px;
                &.multiple {
                    width: auto;
                    max-height: 32px;
                    overflow: auto;
                }
            }
            .start .ivu-input,
            .ivu-select-selection {
                border-right: none;
                border-radius: 0;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
            .middle .ivu-select-selection {
                border-radius: 0
            }
            .ivu-input {
                border-radius: 0;
            }
            .ivu-auto-complete,
            .ivu-input-wrapper {
                width: 300px;
            }
            .btn-search {
                border-radius: 0;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                height: @size * .3 + 2px;
                .flexCenter();
            }
            &.not-select {
                .ivu-input {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
            }
        }
        .search {
            .ivu-form-item {
                margin: 0;
                height: @size * .4;
                .flexLeft();
            }
            .ivu-form-item-label {
                width: 110px;
            }
            .ivu-date-picker,
            .ivu-select,
            .ivu-input-number {
                width: 100% !important;
            }
            .ivu-form-item-content {
                .f1();
            }
            // .ivu-select-selection {
            //     max-height: 32px;
            //     overflow: auto;
            // }
            .search {
                height: @size * .8;
                .flexCenter();
                &.small {
                    height: @size * .4;
                }
            }
        }
        .flex-search {
            .flexLeft();
            .ivu-form-item-label {
                width: 110px;
            }
            .ivu-form-item {
                margin: 0;
                margin-right: @space;
                .flexLeft();
            }
            .large {
                width: 300px;
            }
        }
    }
    .container-body {
        .f1();
        position: relative;
        overflow: hidden;
        .container-title {
            padding: @space @space * 2;
            margin: @space 0 @space * 2;
            .borderBottom(@deepBorder);
            font-size: 18px;
            .flexBetween();
        }
    }
    .container-content {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: auto;
    }
    .container-footer {
        width: 100%;
        height: @size * .6;
        padding: 0 @space;
        .border();
        background-color: fadeout(#ddd, 60%);
        position: relative;
        .flexRight();
        &.blank-footer {
            color: @defaultFont;
            background-color: transparent;
        }
        .item {
            margin-left: @space;
        }
    }
    .mask-loading {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-color: @white;
        position: fixed;
        .flexCenter();
        // .mask-loading-pnl {
        //     width: 128px;
        //     height: 128px;
        //     background-image: url(../../../assets/images/loading-white.png);
        //     animation: maskLoading 1s infinite alternate steps(24);
        // }
    }
    // @keyframes maskLoading {
    //     to {
    //         background-position: -3072px 0;
    //     }
    // }
}
